<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Phyllotaxis Raster</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		// Example inspired by: 'Phyllotactic Spirals' by Ken Frederick
		// http://scriptographer.org/scripts/general-scripts/phyllotactic-spirals/

		// Further reading:
		// http://en.wikipedia.org/wiki/Phyllotaxis
		var raster;
		var values = {
			// The amount of paths to produce:
			amount: 200
		};
		// Create a raster object, using the image
		var raster = new Raster('sunflower');

		// Transform the raster so it fills the bounding rectangle
		// of the view:
		raster.fitBounds(view.bounds, true);

		// Hide the raster:
		raster.visible = false;

		// Create the group of circle shaped paths and scale it up a bit:
		var group = createPhyllotaxis(values.amount);
		group.scale(3);

		function createPhyllotaxis(amount) {
			var group = new Group();
			// The Golden Angle (http://en.wikipedia.org/wiki/Golden_angle)
			var rotation = 137.51;
			var spacing = 5;
			for (var i = 1; i <= amount; i++) {
				var radius = 8 - (i / amount * 4);
				new Path.Rectangle({
					point: {
						length: spacing * Math.sqrt(i),
						angle: i * rotation
					},
					size: new Size(0.95, 0.7) * radius,
					radius: new Size(radius / 4),
					parent: group
				}).rotate(i * rotation + 45);
			}
			return group;
		}

		function colorizePaths(offset) {
			for (var i = offset % 50, l = group.children.length; i < l; i += 50) {
				var path = group.children[i];
				// Set the path's fill color to the average color of the
				// raster pixels that fall within it:
				path.fillColor = raster.getAverageColor(path);
			}
		}

		var position = view.center;
		function onMouseMove(event) {
			position = event.point;
		}

		// Whenever the window is resized, we need to fit the raster
		// in the bounding rectangle of the view again:
		function onResize() {
			raster.fitBounds(view.bounds, true);
		}

		function onFrame(event) {
			// 1/4th of the difference between the center position of
			// the group and the current position of the mouse:
			var delta = (position - group.position) / 4;
			// If the length of the delta vector (the distance) is bigger
			// than 1, reposition the group:
			if (delta.length > 1)
				group.position += delta;
			// Rotate the group of paths by 1 degree:
			group.rotate(1);
			// Rotate each path in the group by 2 degrees:
			for (var i = 0, l = group.children.length; i < l; i++) {
				group.children[i].rotate(2);
			}
			// Colorize the paths every other frame:
			colorizePaths(event.count);
		}
	</script>
</head>
<body style="background:black">
	<img width="415" height="492" id="sunflower" style="display: none;" src="">
	<canvas id="canvas" resize></canvas>
</body>
</html>
